<template>
   <section class="home">
      <my-header></my-header>
      <my-swiper :cbanners="banners"></my-swiper>
      <my-nav></my-nav>
      <my-hot></my-hot>
   </section>
</template>


<script lang="ts" setup>
import MyHeader from '../components/MyHeader.vue'
import MySwiper from '../components/MySwiper.vue'
import MyNav from '../components/MyNav.vue'
import MyHot from '@/components/MyHot.vue'

import { bannerListFn } from '../api'
import { ref } from 'vue'
interface BannerItem {
   href: string;
   src: string;
   id: number
}
let banners = ref<BannerItem[]>([])

const bannerList = async ()=> {
   await bannerListFn()
   .then(
      content=> {
         // console.log('1.0',content)
         let {code , result } =  content;
         if(code == 200) {
            banners.value = result;
         }
      }
   )
}
bannerList();


</script>

<style lang="scss">
@import '../static/common/variable.scss';
.home {
    width: 100%;
    padding-bottom: 90px;
}
</style>
